import { createStore } from 'vuex'

// 自动补齐，类型检查
export interface UserProps {
    isLogin: boolean;
    userName?: string;
}

export interface TemplateProps {
    id: number;
    title: string;
    coverImg: string;
    author: string;
    copiedCount: number;
}

export interface GlobalDataProps {
    user: UserProps;
    templates: TemplateProps[];
}

const testData: TemplateProps[] = [
    { id: 1, title: '模板一', coverImg: 'https://via.placeholder.com/300x400', author: '作者A', copiedCount: 5 },
    { id: 2, title: '模板二', coverImg: 'https://via.placeholder.com/300x400', author: '作者B', copiedCount: 10 },
    { id: 3, title: '模板三', coverImg: 'https://via.placeholder.com/300x400', author: '作者C', copiedCount: 15 },
    { id: 4, title: '模板四', coverImg: 'https://via.placeholder.com/300x400', author: '作者D', copiedCount: 20 },
    { id: 5, title: '模板五', coverImg: 'https://via.placeholder.com/300x400', author: '作者E', copiedCount: 25 },
];

const store = createStore<GlobalDataProps>({
    state: {
        templates: testData,
        user: { isLogin: false }
    },
    mutations: {
        login(state) {
            state.user = {...state.user, isLogin: true, userName: 'viking'}
        },
        logout(state) {
            state.user = { isLogin: false }
        }
    },
    getters: {
        getTemplateById: (state) => (id: number) => {
            return state.templates.find(t => t.id === id)
        }
    }
})

export default store